<template>
	<view class="page">
		<view class="logo">
			<image src="../../static/login-A/logo.png" mode="aspectFill"></image>
		</view>
		<view class="phone">
			{{phone}}
		</view>
		<view class="tip">
			认证服务由{{operator}}提供
		</view>
		<view class="button">
			<view @click="login">
				本机号码一键登录
			</view>
			<view @click="other">
				其他手机号登录
			</view>
		</view>
		<view class="pact">
			<radio :checked="pactChecked" activeBackgroundColor="#3ba662" activeBorderColor="#3ba662"
				borderColor="#3ba662" color="#fff" @click="pactChange" />
			<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "150****6868",
				operator: "中国移动",
				pactChecked: false
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				uni.showToast({
					title: "一键登录",
					icon: 'none'
				})
			},
			other() {
				uni.redirectTo({
					url: "./login"
				})
			},
			pactChange() {
				this.pactChecked = !this.pactChecked
			},
			toPact() {
				uni.showToast({
					title: "协议",
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: url("../../static/login-A/pageBg.png") no-repeat top center;
		background-size: 100%;

		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 600rpx;
			padding-top: 80rpx;

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.title {
			padding-top: 220rpx;
			padding-bottom: 130rpx;

			view {
				padding-left: 64rpx;
				font-size: 48rpx;
				font-weight: 700;
				color: #383838;
			}
		}

		.phone {
			font-size: 72rpx;
			color: #383838;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.tip {
			font-size: 28rpx;
			text-align: center;
			margin-top: 30rpx;
			color: #808080;
			margin-bottom: 100rpx;
		}

		.button {
			padding: 0 64rpx;
			flex: 1;

			view {
				line-height: 96rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 32rpx;
				color: #ffffff;
				background-color: #3ba662;
				margin-bottom: 48rpx;
			}
		}

		.pact {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 70rpx;
			font-size: 24rpx;

			text {
				color: #3ba662;
			}

			radio {
				:deep(.uni-radio-input) {
					border: 1rpx solid #3ba662;
				}

				transform:scale(0.6)
			}
		}
	}
</style>